<template>
	<view style="background: #F6F7FB;">
		<!-- <uv-navbar title="新建仓库" :autoBack="true" :placeholder="true"></uv-navbar> -->
		<div style="height:50rpx"></div>
		<div class="header">
			<div class="back center" @click="back">
				<image src="/static/icon/back.png" mode="widthFix" class="w-20"></image>
			</div>
			{{$t('添加仓库')}}
		</div>
		<view class="bor_bgff screen">
			<view class="title">
				<text style="color: #FF0000;">*</text>{{$t('仓库名称')}}
			</view>
			<view class="info_text">
				<input class="info_input" :placeholder="$t('请输入')" v-model="name" />
			</view>

			<view class="title">
				<text style="color: #FF0000;">*</text>{{$t('仓库面积')}}(㎡)
			</view>
			<view class="info_text">
				<input class="info_input" :placeholder="$t('请输入')" v-model="square" />
			</view>

			<view class="title">
				<text style="color: #FF0000;">*</text>{{$t('仓库类型')}}
			</view>
			<view class="info_text" style="position: relative;">
				<input class="info_input" :placeholder="$t('请输入')" v-model="brand" style="display: none;" />
				<picker :range="brand_arr" :index="brand_index" style="width: 100%;height: 22px;"
					@change="brand_select">
					<text>{{ brand_arr[brand_index] }}</text>
				</picker>
			</view>


			<view class="title">
				{{$t('图片')}}
			</view>

			<view class="info_text" style="position: relative;">
				<!-- <image class="ico_ph" src="/static/img/ph_head.png" mode="aspectFill"></image> -->
				<view class="">
					<uv-upload :fileList="fileList1" name="1" multiple :maxCount="1" @afterRead="afterRead"
						@delete="deletePic" width="90rpx" height="90rpx">
						<image v-if="img != ''" class="ico_ph" :src="img" mode="widthFix"
							style="width: 90rpx;height: 90rpx;"></image>
					</uv-upload>
				</view>
			</view>

			<view class="title">
				<text style="color: #FF0000;">*</text>{{$t('当前所在区域')}}
			</view>
			<view class="info_text">
				<!--    {{siteCity}} {{siteCityLabel}} -->
				<!-- <citySelect :text="siteCityLabel || '请选择'" @confirm="e => {
					siteCity = e.column3.value;
					siteCityLabel = e.column1.label + '-' + e.column2.label + '-' + e.column3.label;
				}" /> -->
				<city :value="siteCity" @change="e => {
					siteCity = e.column3.value;
					siteCityLabel = e.column1.label + '-' + e.column2.label + '-' + e.column3.label;
				}">
					{{ siteCityLabel || $t('请选择') }}
				</city>
				<!-- <input class="info_input" v-model="siteCity" :placeholder="$t('请选择')" /> -->
			</view>

			<view class="title">
				<text style="color: #FF0000;">*</text>{{$t('详细地址')}}
			</view>
			<view class="info_text">
				<input class="info_input" :placeholder="$t('请输入')" v-model="address" />
			</view>

			<view class="title">
				{{$t('备注')}}
			</view>
			<view class="info_text">
				<textarea class="info_textarea" :placeholder="$t('请输入内容')" v-model="remark" />
			</view>

		</view>

		<view class="footer_none"></view>
		<view class="footer_btn" @click="sub()">
			<view class="btn">
				{{$t('确定')}}
			</view>
		</view>

		<uv-picker ref="pickerCity" :columns="addressList" :loading="loading" keyName="name" @change="changeCity"
			@confirm="confirmCity">
		</uv-picker>

	</view>
</template>

<script>
import citySelect from 'pages/publish/components/citySelect.vue';
import { warehouse_save } from '@/api/basic.js'

export default {
	components: {
		citySelect
	},
	data() {
		return {
			loading: true,
			provinces: [], //省
			citys: [], //市
			areas: [], //区
			pickerValue: [0, 0, 0],
			defaultValue: [3442, 1, 2],
			siteCity: '',
			siteCityLabel: '',

			fileList1: [],
			img: '',


			name: '',
			brand: '',
			square: '',
			address: '',
			remark: '',
			lang: 'zh',

			brand_arr: [this.$t('请选择'), this.$t('保温'), this.$t('冷藏'), this.$t('堆场')],
			brand_index: 0,
		}
	},
	created() {
		this.getData();
	},
	computed: {
		addressList() {
			return [this.provinces, this.citys, this.areas];
		}
	},
	onLoad() {
		this.lang = uni.getStorageSync('lang')

	},
	methods: {
		back() {
			// uni.navigateBack({
			// 	delta:1
			// })
			uni.redirectTo({
			  url: '/pages/storeManage/storeManage'
			});
		},
		// 删除图片
		deletePic(event) {
			this[`fileList${event.name}`].splice(event.index, 1)
			this.img = ''
		},
		// 新增图片
		async afterRead(event) {
			// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
			let lists = [].concat(event.file)
			let fileListLen = this[`fileList${event.name}`].length
			lists.map((item) => {
				this[`fileList${event.name}`].push({
					...item,
					status: 'uploading',
					message: $t('上传中')
				})
			})
			for (let i = 0; i < lists.length; i++) {
				const result = await this.uploadFilePromise(lists[i].url)
				let item = this[`fileList${event.name}`][fileListLen]
				this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
					status: 'success',
					message: '',
					url: result
				}))
				fileListLen++
			}

			console.log(this.fileList1);

		},
		uploadFilePromise(url) {
			var that = this;
			return new Promise((resolve, reject) => {
				let a = uni.uploadFile({
					url: 'https://app.gluz.com.cn/api/common/upload', // 仅为示例，非真实的接口地址
					filePath: url,
					name: 'file',
					formData: {
						user: 'test'
					},
					success: (res) => {
						var json = JSON.parse(res.data)
						that.img = json.data.url
						setTimeout(() => {
							resolve(res.data.data)
						}, 1000)
					}
				});
			})
		},
		sub() {
			var that = this
			if (that.name == '') {
				uni.showToast({
					title: this.$t('请输入仓库名称'),
					icon: 'none'
				})
				return
			}
			if (that.square == '') {
				uni.showToast({
					title: this.$t('请输入仓库面积'),
					icon: 'none'
				})
				return
			}
			//所在区域
			if (that.siteCity == '') {
				uni.showToast({
					title: this.$t('请选择所在区域'),
					icon: 'none'
				})
				return
			}
			if (that.address == '') {
				uni.showToast({
					title: this.$t('请输入详细地址'),
					icon: 'none'
				})
				return
			}
			if (that.brand == '') {
				uni.showToast({
					title: this.$t('请选择仓库类型'),
					icon: 'none'
				})
				return
			}
		

			uni.showLoading({
				title: 'loading...',
				mask: true
			})
			warehouse_save({ user_id: uni.getStorageSync('user_id'), 'image': that.img, 'city_id': that.siteCity, 'name': that.name, 'brand': that.brand,'brand_index':that.brand_index ,'square': that.square, 'address': that.address, 'remark': that.remark }).then(res => {
				console.log(res)
				uni.hideLoading()
				if (res.data.code == 200) {
					uni.showModal({
						content: this.$t('操作成功'),
						success: () => {
							uni.redirectTo({
							  url: '/pages/storeManage/storeManage'
							});
						}
					})
				}
			})
		},
		brand_select(e) {
			this.brand_index = e.detail.value
			this.brand = this.brand_arr[this.brand_index]
		},
		getData() {
			// uni.request({
			// 	method: 'GET',
			// 	url: '/ems/static/uvui/example/regions.json',
			// 	success: res => {
			// 		const {
			// 			statusCode,
			// 			data
			// 		} = res
			// 		if (statusCode === 200) {
			// 			console.log('获取的数据：', res);
			// 			this.provinces = data.sort((left, right) => (Number(left.code) > Number(right
			// 				.code) ? 1 : -1));
			// 			console.log(this.provinces)
			// 			this.handlePickValueDefault()
			// 			setTimeout(() => {
			// 				this.loading = false
			// 			}, 200)
			// 		}
			// 	}
			// })
		},
		// showCityPicker(index) {
		// 	this.$refs.pickerCity.open();
		// },
		// handlePickValueDefault() {
		// 	// 设置省
		// 	this.pickerValue[0] = this.provinces.findIndex(item => Number(item.id) === this.defaultValue[0]);
		// 	// 设置市
		// 	this.citys = this.provinces[this.pickerValue[0]]?.children || [];
		// 	this.pickerValue[1] = this.citys.findIndex(item => Number(item.id) === this.defaultValue[1]);
		// 	// 设置区
		// 	this.areas = this.citys[this.pickerValue[1]]?.children || [];
		// 	this.pickerValue[2] = this.areas.findIndex(item => Number(item.id) === this.defaultValue[2]);
		// 	// 重置下位置
		// 	this.$refs.pickerCity.setIndexs([this.pickerValue[0], this.pickerValue[1], this.pickerValue[2]], true);
		// },
		// changeCity(e) {
		// 	if (this.loading) return;
		// 	const {
		// 		columnIndex,
		// 		index,
		// 		indexs
		// 	} = e
		// 	// 改变了省
		// 	if (columnIndex === 0) {
		// 		this.citys = this.provinces[index]?.children || []
		// 		this.areas = this.citys[0]?.children || []
		// 		this.$refs.pickerCity.setIndexs([index, 0, 0], true)
		// 	} else if (columnIndex === 1) {
		// 		this.areas = this.citys[index]?.children || []
		// 		this.$refs.pickerCity.setIndexs(indexs, true)
		// 	}
		// },
		// confirmCity(e) {
		// 	console.log('{{$t('确认选择的地区')}}：', e);
		// 	this.siteCity = `${e.value[0].name}/${e.value[1].name}/${e.value[2].name}`

		// },
	}
}
</script>

<style lang="scss">
.header {
	font-size: 34rpx;
	height: 100rpx;
	line-height: 100rpx;
	font-weight: bold;
	text-align: center;
	position: relative;
	padding-top: var(--status-bar-height);
	// background:#fff;
}

.back {
	position: absolute;
	width: 70rpx;
	height: 70rpx;
	top: 18rpx;
}

.bor_bgff {
	margin: 20rpx 24rpx;
	background: #fff;
	border-radius: 20rpx;
}

.info_input {
	width: 100%;
	font-size: 26rpx;
	line-height: 40px;
}

.info_textarea {
	height: 200rpx;
	border-radius: 18rpx;
	background: #F6F7FB;
	padding: 0;
	color: #333;
	font-size: 26rpx;
	line-height: 40rpx;
}

.screen {
	padding: 0 24rpx 30rpx;

	.title {
		color: #1D1D1D;
		font-size: 28rpx;
		font-weight: 600;
		line-height: 28rpx;
		padding: 34rpx 0 24rpx;
		position: relative;

		.xuan {
			position: absolute;
			right: 0;
			top: 34rpx;
			color: #278AFF;
			font-size: 26rpx;
			font-weight: normal;
		}
	}

	.info_text {
		border-radius: 18rpx;
		background: #F6F7FB;
		padding: 20rpx 24rpx;
		color: #333;
		font-size: 26rpx;
		line-height: 40rpx;
		overflow: hidden;
	}
}

.navbar_right {
	color: #278AFF;
	font-size: 24rpx;
	line-height: 40rpx;
}

.footer_none {
	width: 100%;
	height: 210rpx;
}

.footer_btn {
	position: fixed;
	left: 0;
	bottom: 0;
	right: 0;
	z-index: 9;
	background: #fff;
	padding: 30rpx 30rpx 60rpx;
	box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.05);

	.btn {
		width: 100%;
		height: 90rpx;
		border-radius: 50rpx;
		background: linear-gradient(90deg, #278AFF 0%, #66D6E2 100%);
		color: #fff;
		text-align: center;
		line-height: 90rpx;
		font-size: 32rpx;
		font-weight: 600;
	}
}

.footer_btn1 {
	position: fixed;
	left: 0;
	bottom: 0;
	right: 0;
	z-index: 9;
	background: #fff;
	padding: 30rpx 0 60rpx;
	box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.05);

	.btn_red {
		width: 100%;
		height: 110rpx;
		background: #FFB6B6;
		color: #FF1F1F;
		text-align: center;
		line-height: 110rpx;
		font-size: 32rpx;
	}

	.btn_gray {
		width: 100%;
		height: 110rpx;
		background: #C6C6C6;
		color: #fff;
		text-align: center;
		line-height: 110rpx;
		font-size: 32rpx;
	}
}

.footer_big_btn2 {
	position: fixed;
	left: 0;
	bottom: 0;
	right: 0;
	z-index: 9;
	background: #fff;
	padding: 0 0 60rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;

	.btn_red {
		flex-shrink: 0;
		width: 240rpx;
		height: 120rpx;
		line-height: 120rpx;
		text-align: center;
		color: #fff;
		background: #FF6456;
		font-size: 32rpx;
	}

	.btn_yellow {
		width: 100%;
		height: 120rpx;
		line-height: 120rpx;
		text-align: center;
		color: #fff;
		background: linear-gradient(90deg, #FF811E 0%, #FFBE7C 100%);
		font-size: 32rpx;
	}
}

.footer_btn2 {
	position: fixed;
	left: 0;
	bottom: 0;
	right: 0;
	z-index: 9;
	background: #fff;
	padding: 30rpx 30rpx 60rpx;
	box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.05);
	display: flex;
	align-items: center;
	justify-content: space-between;

	.btn {
		width: 48%;
		height: 90rpx;
		border-radius: 50rpx;
		background: linear-gradient(90deg, #278AFF 0%, #66D6E2 100%);
		color: #fff;
		text-align: center;
		line-height: 90rpx;
		font-size: 32rpx;
		font-weight: 600;
	}

	.btn1 {
		width: 48%;
		height: 90rpx;
		border-radius: 50rpx;
		background: #fff;
		color: #8C8C8C;
		text-align: center;
		line-height: 90rpx;
		font-size: 32rpx;
		border: 1rpx solid #8C8C8C;
	}

	.btn2 {
		width: 48%;
		height: 90rpx;
		border-radius: 50rpx;
		background: #F7F7F7;
		color: #8C8C8C;
		text-align: center;
		line-height: 90rpx;
		font-size: 32rpx;
	}
}
</style>